<template>
  <div class="container">
    <div style="height: 10px"></div>
    <div class="head" v-if="flag == '历史记录'">
      <div style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 90%;
          margin-left: 5%;
        ">
        <div style="width: 40%; text-align: center">
          <picker mode="date" :value="date" :start="startDate" :end="endDate" fields="day" @change="bindDateChange">
            <input v-model="date" placeholder="请选择开始日期" disabled type="text" />
          </picker>
        </div>
        <div style="width: 20%; text-align: center">至</div>
        <div style="width: 40%; text-align: center">
          <picker mode="date" :value="dates" :start="startDates" :end="endDates" fields="day" @change="bindDateChanges">
            <input disabled placeholder="请选择结束日期" v-model="dates" type="text" />
          </picker>
        </div>
      </div>
    </div>
    <div v-if="flag == '历史记录'" style="height: 40px"></div>
    <div v-if="flag == '待接单任务'">
      <div style="width: 95%;margin-left: 2.5%;background: #ffffff;border-radius: 10px;">
        <div style="height: 20px;"></div>
        <div @click="addQuest"
          style="color: #000000;width: 90%;margin-left: 5%;display: flex;align-items: center;justify-content: space-between;">
          <div>新增工单任务</div>
          <div class="addBtn">新增</div>
        </div>
        <div style="height: 20px;"></div>
      </div>
    </div>
    <!-- 内容切换 -->
    <div v-show="list.length == 0">
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
    </div>
    <div class="card" v-for="item in list"  @click="taskDetail(item)">
      <div style="height: 10px"></div>
      <div class="card-top">
        <div style="text-align: center;font-size: 18px;font-weight: 500;">{{ item.workOrderNo }}</div>
        <!-- <div :class="item.workOrderType == 1 ? 'right' : 'right1'"
          style="width: 20%; text-align: center; border-radius: 4px">
          {{ item.workOrderType == 0 ? "自派单" : item.workOrderType == 1 ? '手工单' : '' }}
        </div> -->
        <div style="width: 20%; text-align: center;border-radius: 4px;">
          <image style="width: 110rpx;height: 60rpx;" :src="item.workOrderType == 0?'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202370.png':'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202371.png'" />
        </div>
      </div>
      <div style="height: 10px"></div>
      <u-line color="#83AF92"></u-line>
      <div style="height: 10px"></div>
      <div class="newFlex">
        <div>发单日期</div>
        <div>{{ item.launchTime }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="newFlex">
        <div>有机质类型</div>
        <div>{{ item.vehicleOrganicType }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="newFlex">
        <div>车牌号码</div>
        <div>{{ item.licenseNumber }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="newFlex">
        <div>司机姓名</div>
        <div>{{ item.driverName }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="newFlex">
        <div>司机电话</div>
        <div>{{ item.driverPhone }}</div>
      </div>
      <div v-for="items in item.workOrderDetailVOList" style="margin-top: 10px;">
        <div class="newFlex">
          <div>收运点</div>
          <div>{{ items.farmName }}</div>
        </div>
      </div>
      <div style="height: 10px"></div>
      <!-- workOrderState  -->
      <div v-if="flag != '历史记录'"
        :class="item.workOrderState == 5 ? 'status1' : item.workOrderState == 2 ? 'statusDone' : 'status'">
        {{ item.workOrderState == 0 ? "待派单" : item.workOrderState == 1 ? "进行中"
          : item.workOrderState == 2 ? '已完成' : item.workOrderState == 3 ?
            '待接单' : item.workOrderState == 4 ? "未到收运点" : item.workOrderState == 5 ? '已收集返回中' : item.workOrderState == 6 ?
              '报停中' : '暂无' }}
      </div>
      <div @click="taskDetail(item)" v-if="flag == '历史记录'" class="statusOflg">查看</div>
      <div style="height: 15px"></div>
    </div>
    <div style="height: 30rpx"></div>
    <!-- <div class="btnRound" @click="addQuest">
      <div></div>
      <div class="btn">
        <div>派发任务</div>
      </div>
    </div> -->
    <div style="height: 3vh"></div>
  </div>
</template>
<script>
import { taskList } from "../api/api.js";
export default {
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      date: '',
      dates: '',
      startTime: "",
      endTime: "2023.09.09",
      list: [],
      flag: ''
    };
  },
  methods: {
    bindDateChange: function (e) {
      //选择日期
      this.date = e.detail.value;
      console.log("date", this.date);
      this.funList();
    },
    bindDateChanges: function (e) {
      //选择日期
      this.dates = e.detail.value;
      console.log("date", this.date);
      this.funList();
    },
    getDate(type) {
      //年月日
      const date = new Date();
      // const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    taskDetail(item) {
      uni.setStorageSync("taskDetail", item);
      uni.navigateTo({ url: "/pagesDispatch/index/questDetail" });
    },
    addQuest() {
      uni.navigateTo({ url: "/pagesDispatch/index/addQuest" });
    },
    funList(i) {
      console.log(i, 'iii');

      taskList({
        beginDate: this.date,
        endDate: this.dates,
      }).then((res) => {
        console.log(res.data, "123");
        if (res.data.code == 200) {
          if (i == '进行中任务') {
            uni.setNavigationBarTitle({
              title: '进行中任务'
            });
            this.list = res.data.data.filter((item) => item.workOrderState == 1);
          } else if (i == '待接单任务') {
            this.list = res.data.data.filter((item) => item.workOrderState == 3);
            uni.setNavigationBarTitle({
              title: '待接单任务'
            });
          } else {
            this.list = res.data.data.filter((item) => item.workOrderState == 2);
            uni.setNavigationBarTitle({
              title: '历史记录'
            });
          }

        }
      });
    },
  },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
    startDates() {
      return this.getDate("start");
    },
    endDates() {
      return this.getDate("end");
    },
  },
  onLoad(options) {
    console.log(options.flag);
    this.flag = options.flag;
    this.funList(options.flag);
  },
  onShow() {

  },
};
</script>
<style lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  background: #f3f3f3;
  color: #000000;
  overflow-y: scroll;
}

.card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #ffffff;

  .card-top {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}

.items {
  display: flex;
  align-items: center;
  width: 90%;
  margin-left: 5%;
  justify-content: space-between;
  font-size: 14px;
}

.table {
  width: 90%;
  margin-left: 5%;
}

.status {
  color: #fff;
  background: #000000;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}

.status1 {
  color: #000000;
  background: #000000;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}

.statusOflg {
  color: #ffffff;
  background: #000000;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border-radius: 3px;
}

.statusDone {
  color: #fff;
  background: #000000;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}

.right {
  background: #fdbd18;
  color: #fff;
}

.right1 {
  background: #50ab18;
  color: #fff;
}

.head {
  display: flex;
  align-items: center;
  height: 50px;
  background: #000000;
  color: #fff;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 9999;
}

.btn {
  display: flex;
  align-items: center;
  background: #1b9c46;
  color: #fff;
  border-radius: 7px;
  width: 30%;
  height: 75rpx;
  justify-content: center;
  font-size: 17px;
}

.btnRound {
  width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: space-between;
}

.newFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: 5%;
}

.addBtn {
  width: 120rpx;
  height: 65rpx;
  background-color: #000000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}
</style>
